Adobe Dreamweaver

Adobe Dreamweaver，简称“DW”，中文名称"梦想编织者"，DW是集网页制作和管理网站于一身的所见即所得网页代码编辑器。最初为美国MACROMEDIA公司开发，2005年被Adobe公司收购。^[1]

Adobe Dreamweaver使用所见即所得的接口，利用对 HTML、CSS、JavaScript等内容的支持，设计师和程序员可以在几乎任何地方快速制作和进行网站建设。DW有HTML（标准通用标记语言下的一个应用）编辑的功能，借助经过简化的智能编码引擎，轻松地创建、编码和管理动态网站。访问代码提示，即可快速了解HTML、CSS和其他Web标准。使用视觉辅助功能减少错误并提高网站开发速度。^[1]

2022年6月，Adobe发布Adobe Dreamweaver 21.3版本。^[2]

Dreamweaver1.0发布于1997年12月，由之前的Macromedia公司发布。1998年3月，Dreamweaver1.2版本（第一个Windows版本）发布。Dreamweaver2.0，发布于1998年12月。2005年，Macromedia公司被Adobe公司收购。^[1][2]

2007年4月，Dreamweaver9.0版本替换Adobe GoLive加入Adobe Creative Suite。自2011年4月起，Dreamweaver11.5版本支持HTML5。2013年，13.0版本删除永久使用许可，并通过云端提供服务。2014年4月，14.0版本提供DOM的可视化工具，支持实时查看更新，CSS设计升级。同年6月起，支持64位架构。此后Dreamweaver每年推出一个版本更新，2019年11月，20.0版本发布。2022年6月，Adobe发布Dreamweaver21.3版本，集成了最新的第三方库升级和错误修复。^[2]

开发者主要版本小版本发布日期备注Macromedia1.01.01997年12月第一个版本，只有Mac OS版1.21998年3月第一个Windows版本2.02.01998年12月—3.03.01999年12月—UltraDev 1.02000年6月—4.04.02000年12月—UltraDev 4.02000年12月—6.0MX2002年5月29日—7.0MX 20042003年9月10日—8.08.02005年9月13日最后一个Macromedia版本。 包括在Adobe CS2.3Adobe Systems9.0CS32007年4月16日替换Adobe GoLive加入Adobe Creative Suite10.0CS32008年9月23日—11.0CS52010年4月12日—11.5CS5.52011年4月12日支持HTML512.0CS62012年4月21日—13.0Creative Cloud2013年6月17日此版本删除永久使用许可并透过云端提供服务，消费者并非完整拥有这些软件，而是透过云端服务进行租用，租用停止时无法继续使用应用程序14.0CC 20142014年6月18日DOM的可视化工具，实时查看更新，CSS设计升级14.12014年10月6日支持64位架构16.0CC 20152015年6月16日—17.0CC 20172016年11月2日—18.0CC 20182017年10月19日—19.0CC 20192018年10月15日—20.0CC 20202019年11月4日—21.0CC 20212020年2月—21.1CC 20212021年1月—21.2CC 20212021年10月—21.3CC 20212022年6月—以上参考：^[3]

Adobe Dreamweaver具有实时预览功能，可以在浏览器中实时展示对网页的更改，无需手动刷新页面，提高了工作效率。^[4]用户可以在代码视图中对网页进行编码，或在设计/实时视图中进行设计。如果使用Photoshop合成，则可以提取到Dreamweaver中并进行处理。可以添加设计元素，例如文本、图像、翻转图像、图像映射、颜色、电影、声音、HTML链接、表格等。^[5]

Adobe Dreamweaver内置了强大的代码编辑器，支持HTML、CSS、JavaScript等多种前端技术，方便用户进行代码编写和调试。^[4]结合使用CSS和HTML，可以构建静态站点。大多数网站需要某种形式的交互和数据库来存储所有网站数据。除了文本编辑功能之外，Adobe Dreamweaver还提供各种功能（例如代码提示）来帮助用户进行编码：Dreamweaver中的RoundtripHTML功能允许用户在基于文本的HTML编辑器和Dreamweaver之间来回移动文档，而对文档原始HTML源代码的内容和结构影响缩小或不影响。^[6]

应用程序栏：位于应用程序窗口的顶部，包含工作区切换器、菜单（仅限 Windows）和其他应用程序控件。^[7]

文档工具栏：包含为文档窗口的不同视图（例如设计视图、实时视图和代码视图）提供选项的按钮。^[7]

标准工具栏：要显示标准工具栏，请选择窗口>工具栏>标准。工具栏包含文件和编辑菜单中常见操作的按钮：新建、打开、保存、全部保存、打印代码、剪切、复制、粘贴、撤消和重做。^[7]

工具栏：位于应用程序窗口的左侧，包含特定于视图的按钮。^[7]

文档窗口：在您创建和编辑当前文档时显示该文档。^[7]

物业检查员：允许您查看和更改所选对象或文本的各种属性。每个对象都有不同的属性。^[7]

标签选择器：位于文档窗口底部的状态栏中。显示围绕当前选择的标签层次结构。单击层次结构中的任何标签即可选择该标签及其所有内容。^[7]

面板：帮助您监控和修改您的工作。示例包括“插入”面板、“CSS 设计器” 面板和“文件”面板。要展开面板，请双击其选项卡。^[7]

提取面板：允许您在 Creative Cloud 上上传和查看 PSD 文件。使用此面板，您可以将 PSD 组合中的 CSS、文本、图像、字体、颜色、渐变和尺寸提取到文档中。^[7]

插入面板：包含用于将各种类型的对象（例如图像、表格和媒体元素）插入到文档中的按钮。每个对象都是一段 HTML 代码，您可以在插入它时设置各种属性。例如，您可以通过单击“插入”面板中的“表格”按钮来插入表格。如果您愿意，可以使用“插入”菜单而不是“插入”面板来插入对象。^[7]

文件面板：允许您管理文件和文件夹，无论它们是 Dreamweaver 站点的一部分还是远程服务器上的文件和文件夹。文件面板还允许您访问本地磁盘上的所有文件。有关详细信息，请参阅管理文件和文件夹。^[7]

片段面板：允许您在不同的网页、不同的站点和不同的 Dreamweaver 安装中保存和重复使用代码片段（使用同步设置）。有关更多信息，请参阅通过片段重用代码。^[7]

CSS 设计器面板：是一个 CSS 属性检查器，可让您“直观地”创建 CSS 样式、文件并设置属性以及媒体查询。^[7]

实时取景：显示文档在浏览器中的真实外观，并让您与文档进行交互就像在浏览器中一样。您可以直接在实时视图中编辑 HTML 元素，并在同一视图中立即预览您的更改。有关在实时视图中编辑的更多信息，请参阅在实时视图中编辑 HTML 元素。^[7]

设计视图：是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在此视图中，Dreamweaver 显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。^[7]

代码视图：是一个用于编写和编辑 HTML、JavaScript 和任何其他类型代码的手动编码环境。^[7]

代码-代码：是代码视图的拆分版本，可让您滚动以同时处理文档的不同部分。 ^[7]

代码 - 实时：让您可以在单个窗口中查看同一文档的代码视图和实时视图。^[7]

代码-设计：使您可以在单个窗口中查看同一文档的代码视图和设计视图。^[7]

实时代码：显示浏览器用于执行页面的实际代码，并且可以在您与实时视图中的页面交互时动态更改。^[7]

当文档窗口最大化（默认）时，选项卡会出现在文档窗口的顶部，显示所有打开文档的文件名。如果您进行了更改但尚未保存，Dreamweaver 会在文件名后显示一个星号。^[7]

可以使用“视图”菜单中的以下选项在视图之间切换：^[7]

仅代码视图：选择代码拆分视图：选择“拆分”并选择任意拆分选项视图模式：在实时视图和设计视图之间切换切换视图：将视图从一种视图切换到另一种视图。^[7]

如果您同时打开多个文档，您可以层叠或平铺它们。要级联文档窗口：选择“窗口”>“排列”>“级联”。平铺文档窗口： ^[7]

(Windows) 选择“窗口”>“排列”>“水平平铺”或“垂直平铺”。(Macintosh) 选择窗口 > 排列 > 平铺。^[7]

状态栏显示文档窗口的当前尺寸（以像素为单位）。要设计在特定尺寸下具有最佳外观的页面，您可以将文档窗口调整为任何预定尺寸、编辑这些预定尺寸或创建尺寸。^[7]

在设计或实时视图中更改页面的视图尺寸时，仅视图尺寸的尺寸会发生变化。文档大小不变。^[7]

除了预定和自定义尺寸之外，Dreamweaver 还列出了媒体查询中指定的尺寸。当您选择与媒体查询相对应的尺寸时，Dreamweaver 将使用媒体查询来显示页面。您还可以更改页面方向以预览移动设备的页面，其中页面布局根据设备的握持方式而变化。^[7]

要调整文档窗口的大小，请从文档窗口底部的“窗口大小”弹出菜单中选择一种大小。^[7]

Adobe Dreamweaver提供了丰富的快速开发工具，如代码片段、模板、库等，可以加速网页设计和开发的过程。^[4]附加组件或扩展可以轻松添加到Dreamweaver的新功能。可以使用多种类型的附加组件；例如，有一些附加组件可以重新格式化表格、连接到后端数据库或帮助用户为浏览器编写脚本。Adobe附加组件页面列出了可以安装并与Dreamweaver一起使用的所有附加组件。您还可以从附加组件页面轻松安装附加组件。^[8]

Adobe Dreamweaver可以在Windows、macOS等多个操作系统上运行，并支持多种语言，便于跨平台开发。^[4]

Adobe Dreamweaver可以与Adobe其他软件如Photoshop、Illustrator等无缝协作，方便用户将图形设计转化为网页设计。^[4]

网页设计：Adobe Dreamweaver主要应用于网页设计和开发领域，可用于创建静态网页、动态网页和响应式网页。^[4]Web开发：Adobe Dreamweaver在Web开发领域也有广泛应用，可用于开发各种类型的Web应用程序，如电子商务网站、社交媒体网站等。^[4]教育培训：Adobe Dreamweaver适用于教育培训机构，可以用于设计教育培训网站、在线课程等。^[4]广告营销：Adobe Dreamweaver可用于设计各种类型的广告，如横幅广告、弹出广告、原生广告等，以实现广告营销的目的。^[4]企业内部网站：Adobe Dreamweaver适用于企业内部网站的设计和开发，可用于创建公司主页、内部通讯平台等。^[4]

具有强大的代码编辑和可视化编辑功能，可自定义和优化网页的每一个细节；具有实时预览和调试工具，方便快捷地进行设计和开发；支持多种语言和操作系统，便于跨平台开发和协作；与Adobe其他软件具有良好的协作和集成功能；拥有丰富的插件和扩展功能，可扩展软件的功能和提升效率。^[4]

相对于一些免费开源的网页设计和开发软件来说，价格较高；对于初学者来说，可能需要一定的学习成本和门槛；有时候会发生崩溃或错误，影响工作效率和质量。^[4]

最低要求处理器Intel® Core 2 或 AMD Athlon® 64 处理器；2 GHz 或更快的处理器操作系统Microsoft Windows 10，操作系统最低版本为1903（64位）内存2 GB RAM（建议4 GB）硬盘空间2 GB 可用硬盘空间用于安装；安装期间需要额外的可用空间（大约 2 GB）。Dreamweaver 无法安装在可移动设备上显示器分辨率1280x1024显示屏，带16位视频卡互联网所需的软件激活、订阅验证和访问在线服务需要互联网连接和注册以上参考：^[9]

最低要求处理器支持64位的多核Intel处理器基于ARM的Apple Silicon M1处理器与 Rosetta操作系统macOS v11（大苏尔）、macOS v10.15、macOS v10.14内存2 GB RAM（建议4 GB）硬盘空间3 GB 可用硬盘空间用于安装；安装期间需要额外的可用空间。Dreamweaver 无法安装在可移动支撑设备上显示器分辨率1280x1024显示屏，带16位视频卡互联网所需的软件激活、订阅验证和访问在线服务需要互联网连接和注册以上参考：^[9]

行动苹果视窗快速编辑命令+ECtrl + E快速文档命令+KCtrl + K打开/添加上面的行Command + Shift + EnterCtrl + Shift + Enter显示参数提示Ctrl + ,Ctrl + ,多光标列/矩形选择选择 + 单击 + 拖动Alt + 单击 + 拖动多光标不连续选择命令+单击Ctrl + 单击显示代码提示Ctrl + 空格键Ctrl + 空格键选择孩子 命令+]Ctrl+]前往线路命令+，Ctrl + G选择父标签命令+[Ctrl + [折叠选择Command + Shift + CCtrl + Shift + C折叠外部选择Command + Opt + CCtrl + Alt + C扩大选择Command + Shift + ECtrl + Shift + E折叠完整标签 Command + Shift + JCtrl + Shift + J折叠完整标签之外Command + Opt + JCtrl + Alt + J展开全部Command + Opt + ECtrl + Alt + E缩进代码 Command + Shift + >Ctrl + Shift + >减少缩进代码 Command + Shift + <Ctrl + Shift + <平衡支架 命令+'Ctrl + '代码导航器Command + Opt + NCtrl + Alt + N删除左边的单词命令+删除Ctrl + 退格键删除单词右Command + Fn + 删除Ctrl + 删除选择排队Shift + 向上键Shift + 向上键选择向下行Shift + 下键Shift + 下键向左选择字符Shift + 向左Shift + 向左角色选择右Shift + 向右Shift + 向右选择向上翻页Shift + Fn + 向上翻页Shift + 向上翻页选择向下翻页Shift + Fn + PgDnShift + PgDn向左移动单词选择 + 左键Ctrl + 左键向右移动单词选择+右Ctrl + 向右移动到当前行的开头Command + 左键Alt + 左键移至当前行末尾Command + 右键Alt + 右切换行注释命令+/Ctrl + /切换块注释（适用于 PHP 和 JS 文件）Command + Opt + /Ctrl + Shift + /重复行选择命令+DCtrl + D删除行Command + Shift + DCtrl + Shift + D跳转到定义（JS 文件）命令+JCtrl+J选择正确的单词选择 + Shift + 向右Ctrl + Shift + 向右选择左边的单词Opt + Shift + 向左Ctrl + Shift + 向左移至文件顶部Command + Fn + 左键Ctrl + 主页移至文件末尾Command + Fn + 右键Ctrl + 结束选择文件开头Command + Shift + Fn + 左键Ctrl + Shift + 主页选择到文件末尾Command + Shift + Fn + 向右Ctrl + Shift + 结束转到源代码命令+选择+`Ctrl + Alt + `全屏命令+Ctrl+F不适用关闭窗口命令+WCtrl + W退出申请命令+QCtrl + Q快速标签编辑器命令+TCtrl+T转到下一个单词Command + 右键Ctrl + 向右转到上一个单词Command + 左键Ctrl + 左键转到上一段（设计视图）Command + 向上键Ctrl + 向上键转到下一段（设计视图）命令+向下Ctrl + 向下键选择直到下一个单词Command + Shift + 向右Ctrl + Shift + 向右从上一个单词中选择Command + Shift + 左键Ctrl + Shift + 向左从上一段中选择Command + Shift + 向上键Ctrl + Shift + 向上键选择直到下一段Command + Shift + 向下键Ctrl + Shift + 向下键移至下一个属性窗格Command + Opt + Fn + 向下键Ctrl + Alt + PgDn移至上一个属性窗格Command + Opt + Fn + 向上键Ctrl + Alt + 向上翻页同一窗口中的新内容Command + Shift + NCtrl + Shift + N退出段落命令+回车Ctrl + 返回下一个文档命令+`Ctrl + Tab上一个文档Command + Shift + `Ctrl + Shift + Tab用#括起来Command + Shift + 3Ctrl + Shift + 3以上参考：^[10]